<template>
  <div id="__qr__main" class="scroll-container scan-container">
    <div class="scan-none-1"></div>
    <div class="scan-box-container">
      <div class="scan-none-2"></div>
      <div class="scan-box">
        <div class="scan-box-area">
          <div class="top-left"></div>
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div>
        </div>
      </div>
      <div class="scan-none-2"></div>
    </div>
    <div class="scan-none-1">
      <p>放入框内，自动扫描</p>
      <van-icon size="18" style="margin-top: 16px" @click="cancle" name="cross" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { showFailToast } from 'vant';
import { onBeforeUnmount, onMounted } from 'vue';
const emit = defineEmits(['scan', 'cancle']);
const appBgColor = document.getElementById('app')!.style.backgroundColor;
const bodyBgColor = document.querySelector('body')!.style.backgroundColor;
document.getElementById('app')!.style.backgroundColor = 'transparent';
document.querySelector('body')!.style.backgroundColor = 'transparent';
const resetBackground = () => {
  document.getElementById('app')!.style.backgroundColor = appBgColor;
  document.querySelector('body')!.style.backgroundColor = bodyBgColor;
};
const cancle = () => {
  resetBackground();
  emit('cancle');
};
defineExpose({ resetBackground });
onBeforeUnmount(() => {
  resetBackground();
});
const onDone = (err: any, status: any) => {
  if (err) {
    showFailToast('摄像头未就绪');
  }
  if (status.authorized) {
  } else if (status.denied) {
    showFailToast('授权失败');
  } else {
    showFailToast('摄像头未就绪');
  }
};
try {
  //@ts-ignore
  QRScanner?.prepare(onDone);
} catch (e) {}
const onScan = () => {
  try {
    //@ts-ignore
    QRScanner?.show((status: any) => {});
    //@ts-ignore
    QRScanner?.scan((err: any, contents: any) => {
      if (err) {
        showFailToast(JSON.stringify(err));
      } else {
        resetBackground();
        emit('scan', contents);
      }
    });
  } catch (e) {}
};

onMounted(onScan);
</script>
<style scoped>
.scroll-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.scan-container {
  background: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;
  .scan-none-1 {
    flex: 1;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding-top: 0.2px;
    color: rgba(255, 255, 255, 0.8);
    &:first-child {
      flex: 0.6;
    }
  }
  .scan-box-container {
    display: flex;
    .scan-none-2 {
      flex: 1;
      height: 200px;
      background: rgba(0, 0, 0, 0.4);
    }
    .scan-box {
      width: 200px;
      height: 200px;
      border: 1px solid;
      background: rgba(0, 0, 0, 0);

      .scan-box-area {
        width: 200px;
        height: 200px;
        position: relative;
        .top-left {
          position: absolute;
          top: -3px;
          left: -3px;
          width: 1rem;
          height: 1rem;
          border-top: 6px solid;
          border-left: 6px solid;
        }

        .top-right {
          position: absolute;
          top: -3px;
          right: -3px;
          width: 1rem;
          height: 1rem;
          border-top: 6px solid;
          border-right: 6px solid;
        }

        .bottom-left {
          position: absolute;
          bottom: -3px;
          left: -3px;
          width: 1rem;
          height: 1rem;
          border-bottom: 6px solid;
          border-left: 6px solid;
        }

        .bottom-right {
          position: absolute;
          bottom: -3px;
          right: -3px;
          width: 1rem;
          height: 1rem;
          border-bottom: 6px solid;
          border-right: 6px solid;
        }
      }
    }
  }
}
</style>
